<template>
  <div class="user-profile">
    <el-card class="box-card">
      <h3>用户资料</h3>
      <el-form :model="userInfo" :rules="rules" ref="formRef" label-width="100px" class="user-form">
        <el-form-item label="用户ID：">
          <span>{{ userInfo.id }}</span>
        </el-form-item>

<!--        <el-form-item label="头像：" prop="avatar">-->
<!--          <el-avatar :src="userInfo.avatar" class="avatar" />-->
<!--          <el-button type="primary" @click="handleUploadAvatar">上传头像</el-button>-->
<!--          <p>支持格式：jpg、png、jpeg</p>-->
<!--        </el-form-item>-->

        <el-form-item label="用户昵称：" prop="nickname">
          <el-input v-model="userInfo.nickname" placeholder="请输入用户昵称"></el-input>
        </el-form-item>

        <el-form-item label="性别：" prop="gender">
          <el-radio-group v-model="userInfo.gender">
            <el-radio label="男"></el-radio>
            <el-radio label="女"></el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="手机号：" prop="phone">
          <el-input v-model="userInfo.phone" placeholder="请输入手机号"></el-input>
        </el-form-item>

        <el-form-item label="出生年月：" prop="birthDate">
          <el-date-picker v-model="userInfo.birthDate" type="date" placeholder="选择日期"></el-date-picker>
        </el-form-item>

        <el-form-item label="体重：" prop="weight">
          <el-input v-model.number="userInfo.weight" placeholder="请输入体重"></el-input>
        </el-form-item>

        <el-form-item label="行业：" prop="industry">
          <el-input v-model.number="userInfo.industry" placeholder="请输入行业"></el-input>
        </el-form-item>

        <el-form-item label="地区：" prop="region">
          <el-select v-model="userInfo.region" placeholder="请选择行业">
            <el-option
                v-for="opt in regionOption"
                :key="opt.id"
                :label="opt.name"
                :value="opt.id"
            />

          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="handleSubmit">保存</el-button>
          <el-button @click="handleCancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { router } from '@/router/index.js';
import { useRoute } from 'vue-router';
import axios from 'axios';

const route = useRoute();

const getPreUserInfo = () => {
  axios.post(`/user/getPreUserInfo/${route.query.id}`).then((resp) => {
    userInfo.value = resp.data;
  });
};

const regionOption = ref();
const getRegion = () => {
  axios.get("/user/getAllRegion").then(resp => {


    regionOption.value = resp.data;

  })
}

onMounted(() => {
  getPreUserInfo();//组件打开加载用户信息
  getRegion();

});

const formRef = ref(null);

const userInfo = ref({});

const rules = {
  nickname: [
    { required: true, message: '请输入用户昵称', trigger: 'blur' },
    { min: 2, max: 10, message: '长度在2到10个字符', trigger: 'blur' },
  ],
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' },
  ],
  birthDate: [{ required: true, message: '请选择出生日期', trigger: 'change' }],
  weight: [
    { required: true, message: '请输入体重', trigger: 'blur' },
    { type: 'number', message: '体重必须为数字值', trigger: 'blur' },
  ],
  industry: [{ required: true, message: '请选择行业', trigger: 'change' }],
  region: [{ required: true, message: '请选择地区', trigger: 'change' }],
};

const handleSubmit = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      axios.post(`/user/editPreUserInfo/${route.query.id}`,userInfo.value).then(resp => {
        if(resp.data){
          ElMessage.success('提交成功');
          router.push('/userList');
        }
      })
    } else {
      ElMessage.error('请检查输入信息');
      return false;
    }
  });
};

const handleCancel = () => {
  router.push('/userList');
};

const handleUploadAvatar = () => {
  ElMessage.info('点击了上传头像（实际开发中应打开上传组件）');
};
</script>

<style scoped>
.user-profile {
  padding: 20px;
  font-size: 16px;
}

.box-card {
  width: 100%;
  font-size: 16px;
}

.user-form {
  max-width: 700px;
  margin: 0 auto;
}

h3 {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 24px;
}

.el-form-item {
  margin-bottom: 24px;
  font-size: 16px;
}

.el-form-item__label {
  font-size: 16px;
}

.el-input__inner {
  font-size: 16px;
}

.el-radio__label {
  font-size: 16px;
}

.el-button {
  font-size: 16px;
  padding: 10px 20px;
}

.avatar {
  width: 60px !important;
  height: 60px !important;
  margin-right: 12px;
}
</style>
